<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/dcyk.jpg"
        alt="多彩益科"
      />
      <h2>多彩益科</h2>
    </div>
    <div class="doc">
      <ul class="navbar">
        <li>
          <a
            href="javascript:void(0);"
            @click="navbar('life')"
            :class="background == 'life' ? 'ahover' : ' '"
            >人才机制</a
          >
        </li>
        <li>
          <a
            href="javascript:void(0);"
            @click="navbar('subbata')"
            :class="background == 'subbata' ? 'ahover' : ' '"
            >多彩聚益科</a
          >
        </li>
        <li>
          <a
            href="javascript:void(0);"
            @click="navbar('festival')"
            :class="background == 'festival' ? 'ahover' : ' '"
            >员工风采</a
          >
        </li>
        <li>
          <a
            href="javascript:void(0);"
            @click="navbar('activities')"
            :class="background == 'activities' ? 'ahover' : ' '"
            >加入我们</a
          >
        </li>
      </ul>
      <ul class="list">
        <li @click="listDetails">
          <div class="fl">
            <img
              src="http://www.juyike.cn/Public/uploads/Activity/57ecfa12edb1d.jpg"
              alt=""
            />
          </div>
          <div class="fr">
            <h3>衣旧情深 全员捐赠</h3>
            <p>——聚益科集团第一次旧衣物捐赠活动圆满结束</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      background: "",
      dataList: {},
    };
  },
  created() {
    this.background = this.$route.query.type;
  },
  methods: {
    navbar(type) {
      this.background = type;
    },
    listDetails() {
      this.$router.push({ path: "/listdetails" });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  .doc {
    padding: 0 0 50px 30px;
    .navbar {
      background: url(http://www.juyike.cn/Public/Home/images/jyknavBg.jpg)
        no-repeat 0 bottom;
      width: 80%;
      margin: 30px auto;
      list-style-type: none;
      li {
        width: 25%;
        height: 115px;
        float: left;
        text-align: center;
        cursor: pointer;
        a {
          color: #ee020d;
          font-size: 20px;
          height: 115px;
          line-height: 115px;
          display: inline-block;
          width: 100%;
          text-decoration: none;
        }
        a:hover {
          background: url(http://www.juyike.cn/Public/Home/images/hover.jpg)
            no-repeat;
          color: #fff;
          background-size: 100% 115px;
        }
      }
    }
    .navbar:after {
      content: "\20";
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
    }
    .list {
      padding-right: 30px;
      li {
        border-bottom: 1px solid #e5e5e5;
        padding: 30px 35px;
        display: flow-root;
        .fl {
          width: 24%;
          float: left;
          display: block;
          img {
            max-width: 376px;
            min-width: 280px;
            width: 100%;
          }
        }
        .fr {
          float: right;
          width: 69%;
          font-size: 16px;
          h3 {
            font-size: 18px;
            margin-bottom: 2%;
            font-weight: normal;
          }
        }
      }
      li:hover {
        color: #aa001b;
      }
    }
  }
}
.ahover {
  background: url(http://www.juyike.cn/Public/Home/images/hover.jpg) no-repeat;
  color: #fff !important;
  background-size: 100% 115px;
}
</style>
